<template>
  <div class="good-container" ref="parent">
    <div class="good-top">
      <div class="good-search">
        <el-input
          placeholder="请输入你要搜索的展厅"
          v-model="queryParams.key"
          @keyup.native.enter="search"
          size="small"
          @clear="search"
          clearable
        ></el-input>
      </div>
      <div class="good-btn">
        <el-button type="primary" size="small" @click="isShowDialog = true">新增</el-button>
      </div>
    </div>

    <el-scrollbar style="height: calc(100vh - 190px)" class="scrollbar" id="scroll-bar">
      <el-table
        ref="table"
        :row-key="(row) => row.data_id"
        :data="list"
        v-loading="loading"
        :expand-row-keys="expandedRowKeys"
        @expand-change="expandChange"
      >
        <el-table-column label="id" prop="data_id" width="120"></el-table-column>
        <el-table-column label="展厅banner">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.title_page"
              style="width: 100px; height: 40px"
              :src="scope.row.title_page"
              :preview-src-list="[scope.row.title_page]"
              fit="cover"
            ></el-image>
            <span v-else>暂无图片</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="背景图建议尺寸" width="160" prop="size">
          <template>
            <span style="text-align: center;">
              1920 * 520
            </span>
          </template>
        </el-table-column> -->
        <el-table-column label="展厅名称" prop="name"></el-table-column>
        <el-table-column label="操作" width="450">
          <template slot-scope="scope">
            <el-upload
              action=""
              class="avatar-uploader"
              style="width: 104px; float: left"
              :show-file-list="false"
              :before-upload="
                (file) => {
                  beforeAvatarUpload(file, scope.row.data_id);
                }
              "
            >
              <el-button size="mini">上传banner</el-button>
            </el-upload>
            <!-- <el-button type="primary" @click="onShowDrawer(scope.row)" size="mini">详情</el-button> -->
            <el-button type="primary" @click="updSpecialSub(scope.row.data_id, scope.row)" size="mini">修改</el-button>
            <el-button type="danger" @click="delStadiums(scope.row.data_id)" size="mini" style="margin-right: 5px">
              删除
            </el-button>
            <el-link type="primary" style="margin: 0 2px" @click="Dialog('Images', scope.row)">作品</el-link>
            <el-link type="primary" style="margin: 0 2px" @click="Dialog('Opens', scope.row)">开幕式</el-link>
            <el-link type="primary" style="margin: 0 2px" @click="Dialog('Pictures', scope.row)">展览</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>

    <paging ref="page" :func="getList"></paging>

    <!-- <el-dialog @click="closeWorkWind" title="新增作品" :visible.sync="showWorkDialog">
      <el-form :model="workForm" :rules="workRules" ref="workForm" label-width="80px" class="demo-dataParams">
        <el-form-item label="作品名称" prop="name">
          <el-input v-model="workForm.name"></el-input>
        </el-form-item>
        <el-form-item label="艺术家" prop="art_id">
          <el-select v-model="workForm.art_id" filterable @change="artChange">
            <el-option
              v-for="item in userList"
              :key="item.data_id"
              :label="item.name"
              :value="item.data_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="作品类型" prop="type">
          <el-radio-group v-model="workForm.type">
            <el-radio :label="0">图片</el-radio>
            <el-radio :label="1">视频</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否推荐" prop="作品类型">
          <el-switch v-model="workForm.recommend" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showWorkDialog = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog> -->

    <el-dialog @close="closeSubWind" title="新增" :visible.sync="showImagesDialog">
      <el-form :model="imagesForm" :rules="imagesRules" ref="imagesForm" label-width="80px" class="demo-dataParams">
        <el-form-item label="作品名称" prop="name">
          <el-input v-model="imagesForm.name"></el-input>
        </el-form-item>
        <el-form-item label="艺术家" prop="art_id">
          <el-select
            v-model="imagesForm.art_id"
            remote
            filterable
            :remote-method="remoteMethod"
            :loading="queryLoading"
            @change="artChange"
          >
            <el-option
              v-for="item in userList"
              :key="item.data_id"
              :label="item.name"
              :value="item.data_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="作品类型" prop="type">
          <el-radio-group v-model="imagesForm.type">
            <el-radio :label="0">图片</el-radio>
            <el-radio :label="1">视频</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否推荐" prop="作品类型">
          <el-switch v-model="imagesForm.recommend" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeSubWind">取 消</el-button>
        <el-button type="primary" @click="subSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog @close="closeSubWind" title="新增" :visible.sync="showOpensDialog">
      <el-form :model="opensForm" :rules="opensRules" ref="opensForm" label-width="80px" class="demo-dataParams">
        <el-form-item label="名称" prop="name">
          <el-input v-model="opensForm.name"></el-input>
        </el-form-item>
        <el-form-item label="说明" prop="explan">
          <el-input type="textarea" :rows="2" placeholder="请输入说明" v-model="opensForm.explan"></el-input>
        </el-form-item>
        <el-form-item label="作品类型" prop="type">
          <el-radio-group v-model="opensForm.type">
            <el-radio :label="0">图片</el-radio>
            <el-radio :label="1">视频</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeSubWind">取 消</el-button>
        <el-button type="primary" @click="subSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog @close="closeSubWind" title="新增" :visible.sync="showPicturesDialog">
      <el-form
        :model="picturesForm"
        :rules="picturesRules"
        ref="picturesForm"
        label-width="80px"
        class="demo-dataParams"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="picturesForm.name"></el-input>
        </el-form-item>
        <el-form-item label="说明" prop="explan">
          <el-input type="textarea" :rows="2" placeholder="请输入说明" v-model="picturesForm.explan"></el-input>
        </el-form-item>
        <el-form-item label="作品类型" prop="type">
          <el-radio-group v-model="picturesForm.type">
            <el-radio :label="0">图片</el-radio>
            <el-radio :label="1">视频</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeSubWind">取 消</el-button>
        <el-button type="primary" @click="subSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog @closed="onClose" title="提示" :visible.sync="isShowDialog">
      <el-form :model="params" :rules="rules" ref="dataParams" label-width="80px" class="demo-dataParams">
        <el-form-item label="名称" prop="name">
          <el-input v-model="params.name"></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="introduction">
          <el-input type="textarea" v-model="params.introduction"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowDialog = false">取 消</el-button>
        <el-button type="primary" @click="dialogConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="dialogTitle" :visible.sync="ImagesDialog" :fullscreen="true">
      <el-row :gutter="20">
        <el-col :span="2" :offset="10"><div style="text-align: center; font-size: 16px">作品</div></el-col>
        <el-col :span="2" :offset="10">
          <div>
            <el-button type="primary" size="small" @click="addSub(activeRow, 'Images')">新增</el-button>
          </div>
        </el-col>
      </el-row>
      <el-table :data="activeRow.images || []">
        <el-table-column label="名称">
          <template slot-scope="subScope">
            <el-link type="primary">{{ subScope.row.name }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="类型">
          <template slot-scope="subScope">
            <el-link type="primary">{{ subScope.row.type == 0 ? '图片' : '视频' }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="封面图">
          <template slot-scope="subScope">
            <el-image
              v-if="subScope.row.title_page"
              style="width: 100px; height: 40px"
              :src="subScope.row.title_page"
              :preview-src-list="[subScope.row.title_page]"
              fit="cover"
            ></el-image>
            <span v-else>暂无图片</span>
          </template>
        </el-table-column>
        <el-table-column label="大图/视频">
          <template slot-scope="subScope">
            <el-image
              v-if="Array.isArray(subScope.row.opus_id) && subScope.row.opus_id?.length > 0 && subScope.row.type == 0"
              style="width: 100px; height: 40px; cursor: pointer"
              :src="getBigImg(subScope.row.opus_id[0].id)"
              @click="lookBig(subScope.row)"
              fit="cover"
            ></el-image>
            <div v-else-if="subScope.row.type == 1 && subScope.row.video_url">
              {{ '已上传' }}
            </div>
            <span v-else>暂无数据</span>
          </template>
        </el-table-column>
        <el-table-column label="是否推荐">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.recommend"
              @change="onRecommend(scope.row, 'Images')"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="400px">
          <template slot-scope="subScope">
            <el-upload
              action="/ws"
              class="avatar-uploader"
              style="width: 90px; float: left"
              :show-file-list="false"
              :on-progress="uploadVideoProcess"
              :on-success="handleVideoSuccess"
              :before-upload="
                (file) => {
                  beforeMapUpload(file, subScope.row, 'Images');
                }
              "
            >
              <el-button size="mini">
                {{ subScope.row.type == 0 ? '上传大图' : '上传视频' }}
              </el-button>
              <el-progress
                v-if="videoFlag && uploadVideoId == subScope.row.data_id"
                :percentage="videoUploadPercent"
                style="margin-top: 30px"
              ></el-progress>
            </el-upload>
            <el-upload
              action="/ws"
              class="avatar-uploader"
              style="width: 90px; float: left"
              :show-file-list="false"
              :before-upload="
                (file) => {
                  subBeforeAvatarUpload(file, subScope.row.data_id, 'Images');
                }
              "
            >
              <el-button size="mini">上传封面</el-button>
            </el-upload>
            <el-button type="primary" size="mini" @click="edit(subScope.row, 'Images')">修改</el-button>
            <el-button type="danger" size="mini" @click="del(subScope.row, 'Images')">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <paging ref="imagesPage" :func="getImages"></paging>
    </el-dialog>

    <el-dialog :title="dialogTitle" :visible.sync="OpensDialog" :fullscreen="true">
      <el-row :gutter="20">
        <el-col :span="2" :offset="10"><div style="text-align: center; font-size: 16px">开幕式</div></el-col>
        <el-col :span="2" :offset="10">
          <div>
            <el-button type="primary" size="small" @click="addSub(activeRow, 'Opens')">新增</el-button>
          </div>
        </el-col>
      </el-row>
      <el-table :data="activeRow.opens || []">
        <el-table-column label="名称">
          <template slot-scope="subScope">
            <el-link type="primary">{{ subScope.row.name }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="类型">
          <template slot-scope="subScope">
            <el-link type="primary">{{ subScope.row.type == 0 ? '图片' : '视频' }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="说明">
          <template slot-scope="subScope">
            <el-link type="primary">{{ subScope.row.explan }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="大图/视频">
          <template slot-scope="subScope">
            <el-image
              v-if="subScope.row.opus_id && subScope.row.opus_id.length > 0 && subScope.row.type == 0"
              style="width: 100px; height: 40px; cursor: pointer"
              :src="getBigImg(subScope.row.opus_id[0].id)"
              @click="lookBig(subScope.row)"
              fit="cover"
            ></el-image>
            <div v-else-if="subScope.row.type == 1 && subScope.row.video_url">
              {{ '已上传' }}
            </div>
            <span v-else>暂无数据</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="400px">
          <template slot-scope="subScope">
            <el-upload
              action="/ws"
              class="avatar-uploader"
              style="width: 90px; float: left"
              :show-file-list="false"
              :on-progress="uploadVideoProcess"
              :on-success="handleVideoSuccess"
              :before-upload="
                (file) => {
                  beforeMapUpload(file, subScope.row, 'Opens');
                }
              "
            >
              <el-button size="mini">
                {{ subScope.row.type == 0 ? '上传图片' : '上传视频' }}
              </el-button>
              <el-progress
                v-if="videoFlag && uploadVideoId == subScope.row.data_id"
                :percentage="videoUploadPercent"
                style="margin-top: 30px"
              ></el-progress>
            </el-upload>
            <el-button type="primary" size="mini" @click="edit(subScope.row, 'Opens')">修改</el-button>
            <el-button type="danger" size="mini" @click="del(subScope.row, 'Opens')">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <paging ref="opensPage" :func="getOpens"></paging>
    </el-dialog>

    <el-dialog :title="dialogTitle" :visible.sync="PicturesDialog" :fullscreen="true">
      <el-row :gutter="20">
        <el-col :span="2" :offset="10"><div style="text-align: center; font-size: 16px">展览</div></el-col>
        <el-col :span="2" :offset="10">
          <div>
            <el-button type="primary" size="small" @click="addSub(activeRow, 'Pictures')">新增</el-button>
          </div>
        </el-col>
      </el-row>
      <el-table :data="activeRow.pictures || []">
        <el-table-column label="名称">
          <template slot-scope="subScope">
            <el-link type="primary">{{ subScope.row.name }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="类型">
          <template slot-scope="subScope">
            <el-link type="primary">{{ subScope.row.type == 0 ? '图片' : '视频' }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="说明">
          <template slot-scope="subScope">
            <el-link type="primary">{{ subScope.row.explan }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="大图/视频">
          <template slot-scope="subScope">
            <el-image
              v-if="subScope.row.opus_id?.length > 0 && subScope.row.type == 0"
              style="width: 100px; height: 40px; cursor: pointer"
              :src="getBigImg(subScope.row.opus_id[0].id)"
              @click="lookBig(subScope.row)"
              fit="cover"
            ></el-image>
            <div v-else-if="subScope.row.type == 1 && subScope.row.video_url">
              {{ '已上传' }}
            </div>
            <span v-else>暂无数据</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="400px">
          <template slot-scope="subScope">
            <el-upload
              action="/ws"
              class="avatar-uploader"
              style="width: 90px; float: left"
              :show-file-list="false"
              :on-progress="uploadVideoProcess"
              :on-success="handleVideoSuccess"
              :before-upload="
                (file) => {
                  beforeMapUpload(file, subScope.row, 'Pictures');
                }
              "
            >
              <el-button size="mini">
                {{ subScope.row.type == 0 ? '上传大图' : '上传视频' }}
              </el-button>
              <el-progress
                v-if="videoFlag && uploadVideoId == subScope.row.data_id"
                :percentage="videoUploadPercent"
                style="margin-top: 30px"
              ></el-progress>
            </el-upload>
            <el-button type="primary" size="mini" @click="edit(subScope.row, 'Pictures')">修改</el-button>
            <el-button type="danger" size="mini" @click="del(subScope.row, 'Pictures')">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <paging ref="picturesPage" :func="getPictures"></paging>
    </el-dialog>

    <el-drawer :title="obj.name" :visible.sync="isShowDrawer" direction="rtl">
      <div class="show-detail">
        <div class="detail-item">
          <div class="item-title">作品详情：</div>
          <div class="item-content">{{ obj }}</div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import goodManage from '@/api/good';
  import artGalleryManage from '@/api/artGallery';
  import paging from '@/components/paging';
  import articleManage from '@/api/article';
  import videoManage from '@/api/video';
  import artManage from '@/api/works';
  import artisManage from '@/api/artis';
  import { getBigImg } from '@/utils/image';
  import Vue from 'vue';
  import { qiniuUploadFile } from '@/utils/QiniuUpload';

  export default {
    components: {
      paging,
    },
    data() {
      return {
        list: [],
        videoUploadPercent: 0,
        videoFlag: false,
        value: '',
        timer: null,
        queryParams: {
          key: '',
          // min_create_time: '',
        },
        activeRow: {},
        isShowDialog: false,
        isShowDrawer: false,
        params: {
          name: '',
          introduction: '',
        },
        expandedRowKeys: [100010],
        workForm: {
          stadiums_id: '',
          name: '',
          art_id: '',
          type: 0,
          recommend: 0,
          opus_id: [],
        },
        imagesForm: {
          stadiums_id: '',
          name: '',
          art_id: '',
          type: 0,
          recommend: 0,
          opus_id: [],
        },
        opensForm: {
          stadiums_id: '',
          name: '',
          explan: '',
          type: 0,
          opus_id: [],
        },
        picturesForm: {
          stadiums_id: '',
          name: '',
          explan: '',
          type: 0,
          opus_id: [],
        },
        obj: {},
        rules: {
          name: [{ required: true, message: '请输入展厅名称', trigger: 'blur' }],
          introduction: [{ required: true, message: '请输入展厅介绍', trigger: 'change' }],
        },
        workRules: {
          name: [{ required: true, message: '请输入作品名称', trigger: 'blur' }],
          art_id: [{ required: true, message: '请选择艺术家', trigger: 'change' }],
          type: [{ required: true, message: '请选择作品类型', trigger: 'change' }],
        },
        imagesRules: {
          name: [{ required: true, message: '请输入作品名称', trigger: 'blur' }],
          art_id: [{ required: true, message: '请选择艺术家', trigger: 'change' }],
          type: [{ required: true, message: '请选择作品类型', trigger: 'change' }],
        },
        opensRules: {
          name: [{ required: true, message: '请输入作品名称', trigger: 'blur' }],
          explan: [{ required: true, message: '请输入说明', trigger: 'blur' }],
          type: [{ required: true, message: '请选择作品类型', trigger: 'change' }],
        },
        picturesRules: {
          name: [{ required: true, message: '请输入作品名称', trigger: 'blur' }],
          art_id: [{ required: true, message: '请选择艺术家', trigger: 'change' }],
          type: [{ required: true, message: '请选择作品类型', trigger: 'change' }],
        },
        updId: '',
        updSubId: '',
        menuId: '',
        userList: [],
        loading: false,
        showImagesDialog: false,
        showOpensDialog: false,
        showPicturesDialog: false,
        type: '',
        dialogTitle: '',
        ImagesDialog: false,
        OpensDialog: false,
        PicturesDialog: false,
        queryLoading: false,
      };
    },
    watch: {},
    mounted() {
      this.refresh();
      this.getArtType();
    },
    methods: {
      async remoteMethod(query) {
        // if (!query) return;
        this.queryLoading = true;
        let userRes = await artisManage.getArtis({ key: query, notPagination: true });
        this.userList = userRes.item_list;
        this.queryLoading = false;
      },
      add(type) {
        this[type].push({});
      },
      artChange(v) {
        this.imagesForm.art_name = this.userList.find((u) => u.data_id == v).name;
      },
      // 查看大图
      lookBig(data) {
        console.log(data);
        if (data.opus_id && data.opus_id.length > 0) {
          let { BasicDraw, BigImageShow } = require('../../../utils/main');
          let basicDraw = new BasicDraw(); // 创建基础渲染类
          basicDraw.zIndex = 9999;
          basicDraw.start(); // 开始渲染
          new BigImageShow().showBigImg(data.opus_id[0].id);

          document.getElementById('bigIamgeClose').addEventListener('click', (e) => {
            basicDraw.dispose();
            e.stopPropagation();
          });
        }
      },
      getBigImg,
      async getArtType() {
        let userRes = await artisManage.getArtis({ notPagination: true });
        this.userList = userRes.item_list;
      },
      remove(type, i) {
        this[type].splice(i, 1);
      },
      querySearchEssay(queryString, cb) {
        articleManage.getArticle({ key: queryString, notPagination: true }).then((res) => {
          res.item_list.forEach((m) => {
            m.value = m.title;
          });
          cb(res.item_list);
        });
      },
      querySearchVideo(queryString, cb) {
        videoManage.getVideoType({ key: queryString, notPagination: true }).then((res) => {
          res.item_list.forEach((m) => {
            m.value = m.video_name;
          });
          cb(res.item_list);
        });
      },
      querySearchWorks(queryString, cb) {
        artManage.getArt({ key: queryString, notPagination: true }).then((res) => {
          res.item_list.forEach((m) => {
            m.value = m.name;
          });
          cb(res.item_list);
        });
      },
      selectItem(type, i, m) {
        this[type][i].data_id = m.data_id;
      },
      contextMenu(r, column, e) {
        let rect = this.$refs.parent.getBoundingClientRect();
        this.$refs.menu.style.top = e.clientY - rect.top + 'px';
        this.$refs.menu.style.left = e.clientX - rect.left + 'px';
        // this.menuId = r.data_id;
        console.log(r);
        e.preventDefault();
      },
      refresh() {
        this.$refs.page.refresh();
        // this.$refs.workPage.refresh()
      },
      search() {
        this.$refs.page.search();
      },
      expandChange(row, expandedRows) {
        console.log(row, expandedRows);
        // this.getWorkList(row, expandedRows)
        if (expandedRows) {
          this.expandedRowKeys = [row.data_id];
        } else {
          this.expandedRowKeys = [];
        }
        console.log(row);
        this.activeRow = row;
        console.log(this.$refs);
        this.$nextTick(() => {
          if (this.$refs.workPage) this.$refs.workPage.refresh();
          if (this.$refs.imagesPage) this.$refs.imagesPage.refresh();
          if (this.$refs.opensPage) this.$refs.opensPage.refresh();
          if (this.$refs.picturesPage) this.$refs.picturesPage.refresh();
        });
      },
      handleVideoSuccess(res, file) {
        //视频上传成功之后返回视频地址
        this.videoFlag = false;
        this.videoUploadPercent = 0;
      },
      uploadVideoProcess(event, file, fileList) {
        this.videoFlag = true;
        this.videoUploadPercent = parseInt(file.percentage);
        console.log('this.videoUploadPercent', file.percentage);
      },
      async beforeMapUpload(file, row, type) {
        const formData = new FormData();
        formData.append('上传的key值', file);
        this.uploadVideoId = row.data_id;
        // this.videoUploadPercent = 0;
        // const timer = setInterval(() => {
        //   if (this.videoUploadPercent >= 99) {
        //     this.videoUploadPercent = 100;
        //     this.videoFlag = false;
        //     clearInterval(timer);
        //     return;
        //   }
        //   this.videoUploadPercent += 1;
        // }, 20);
        if (row.type == 0) {
          let res = await qiniuUploadFile(file, 'artGallery', (progressEvent) => {
            if (progressEvent.lengthComputable) {
              console.log('progressEvent', progressEvent);
              this.videoFlag = true; // 显示进度条
              this.videoUploadPercent = parseInt((progressEvent.loaded / progressEvent.total) * 100); // 动态获取文件上传进度
              if (this.videoUploadPercent >= 99) {
                this.videoUploadPercent = 99; // 一秒后关闭进度条
              }
            }
          });

          // let url = await artManage.uploadMap(formData, (progressEvent) => {
          //   if (progressEvent.lengthComputable) {
          //     console.log('progressEvent', progressEvent);
          //     this.videoFlag = true; // 显示进度条
          //     this.videoUploadPercent = parseInt((progressEvent.loaded / progressEvent.total) * 100); // 动态获取文件上传进度
          //     if (this.videoUploadPercent >= 99) {
          //       this.videoUploadPercent = 99; // 一秒后关闭进度条
          //     }
          //   }
          // });
          if (res) {
            let url = res.key;

            // 通过 "http://img.zgcart.cn/c3a384be-5371-4525-a685-2322bf940bd5.jpg" 获取 "c3a384be-5371-4525-a685-2322bf940bd5.jpg"
            let imgName = url.substring(url.lastIndexOf('/') + 1);

            let opus_id = await artManage.imageMap({
              image_list: [
                {
                  image_src_url: url,
                  image_src_type: 'local',
                  image_name: imgName,
                  type: 1,
                  access_type: 0,
                  note: '',
                },
              ],
            });
            if (opus_id) {
              this.videoFlag = false;
              this.$message.success('上传成功');
              // clearInterval(timer);
              this.videoUploadPercent = 0;
            }
            console.log('row.data_id', row.data_id);
            await artGalleryManage[`upd${type}`](row.data_id, { opus_id });
          }
        } else {
          let res = await qiniuUploadFile(file, 'artGallery', (progressEvent) => {
            if (progressEvent.lengthComputable) {
              console.log('progressEvent', progressEvent);
              this.videoFlag = true; // 显示进度条
              this.videoUploadPercent = parseInt((progressEvent.loaded / progressEvent.total) * 100); // 动态获取文件上传进度
              if (this.videoUploadPercent >= 99) {
                this.videoUploadPercent = 99; // 一秒后关闭进度条
              }
            }
          });

          // const res = await artGalleryManage[`upload${type}Video`](row.data_id, formData, (progressEvent) => {
          //   if (progressEvent.lengthComputable) {
          //     console.log('progressEvent', progressEvent);
          //     this.videoFlag = true; // 显示进度条
          //     this.videoUploadPercent = parseInt((progressEvent.loaded / progressEvent.total) * 100); // 动态获取文件上传进度
          //     if (this.videoUploadPercent >= 99) {
          //       this.videoUploadPercent = 99; // 一秒后关闭进度条
          //     }
          //   }
          // });

          if (res) {
            artGalleryManage[`upd${type}`](row.data_id, { video_url: res.key });
            this.videoFlag = false;
            this.$message.success('上传成功');
            // clearInterval(timer);
            this.videoUploadPercent = 100;
          }
        }
        // this.$loading().close()
        if (this.$refs[`${type.toLowerCase()}Page`]) this.$refs[`${type.toLowerCase()}Page`].refresh();
      },
      getImages(callback) {
        // console.log('this.activeRow', this.activeRow);
        // const index = this.list.findIndex(item => {
        //   return item.data_id == row.data_id
        // })
        // console.log(row, this.list, index)
        const params = {
          stadiums_id: this.activeRow.data_id,
        };
        artGalleryManage.getImages(params).then(async (res) => {
          // this.list[index].work_list = res.item_list
          let total = res.total_count;
          this.list.forEach((ele) => {
            if (ele.data_id === this.activeRow.data_id) {
              console.log(ele.data_id, this.activeRow.data_id, res.item_list);
              Vue.set(ele, 'images', res.item_list);
            }
          });
          console.log('this.list', this.list);
          callback(res.item_list, total);
        });
      },
      getOpens(callback) {
        // console.log('this.activeRow', this.activeRow);
        // const index = this.list.findIndex(item => {
        //   return item.data_id == row.data_id
        // })
        // console.log(row, this.list, index)
        const params = {
          stadiums_id: this.activeRow.data_id,
        };
        artGalleryManage.getOpens(params).then(async (res) => {
          // this.list[index].work_list = res.item_list
          let total = res.total_count;
          this.list.forEach((ele) => {
            if (ele.data_id === this.activeRow.data_id) {
              console.log(ele.data_id, this.activeRow.data_id, res.item_list);
              Vue.set(ele, 'opens', res.item_list);
            }
          });
          console.log('opens', this.activeRow.opens);
          callback(res.item_list, total);
        });
      },
      getPictures(callback) {
        // console.log('this.activeRow', this.activeRow);
        // const index = this.list.findIndex(item => {
        //   return item.data_id == row.data_id
        // })
        // console.log(row, this.list, index)
        const params = {
          stadiums_id: this.activeRow.data_id,
        };
        artGalleryManage.getPictures(params).then(async (res) => {
          // this.list[index].work_list = res.item_list
          let total = res.total_count;
          this.list.forEach((ele) => {
            if (ele.data_id === this.activeRow.data_id) {
              console.log(ele.data_id, this.activeRow.data_id, res.item_list);
              Vue.set(ele, 'pictures', res.item_list);
            }
          });
          console.log('pictures', this.activeRow.pictures);
          callback(res.item_list, total);
        });
      },
      getWorkList(callback) {
        console.log('this.activeRow', this.activeRow);
        // const index = this.list.findIndex(item => {
        //   return item.data_id == row.data_id
        // })
        // console.log(row, this.list, index)
        const params = {
          stadiums_id: this.activeRow.data_id,
        };
        goodManage.getWorkList(params).then(async (res) => {
          // this.list[index].work_list = res.item_list
          let total = res.total_count;
          this.list.forEach((ele) => {
            if (ele.data_id === this.activeRow.data_id) {
              console.log(ele.data_id, this.activeRow.data_id, res.item_list);
              ele.work_list = res.item_list;
            }
          });
          console.log('this.list', this.list);
          callback(res.item_list, total);
        });
      },
      getList(callback) {
        artGalleryManage.getArtGallery(this.queryParams).then(async (res) => {
          let total = res.total_count;
          this.list = res.item_list;
          this.$refs.table.clearSort();
          this.$refs.table.clearSelection();
          callback(this.list, total);
        });
      },
      async beforeAvatarUpload(file, id) {
        // const formData = new FormData();
        // formData.append('上传的key值', file);
        // await artGalleryManage.uploadArtImage(id, formData);
        let res = await qiniuUploadFile(file, 'artGallery');
        if (res) {
          await artGalleryManage.updArtGallery(id, { title_page: res.key });
        }

        this.refresh();
      },
      async subBeforeAvatarUpload(file, id, type) {
        // const formData = new FormData();
        // formData.append('上传的key值', file);
        // await artGalleryManage[`upload${type}Banner`](id, formData);
        // this.$refs[`${type.toLowerCase()}Page`].refresh();

        // 七牛云上传
        let res = await qiniuUploadFile(file, 'artGallery');
        if (res) {
          await artGalleryManage[`upd${type}`](id, { title_page: res.key });
          this.$refs[`${type.toLowerCase()}Page`].refresh();
        }
      },
      updSpecialSub(data_id, row) {
        this.isShowDialog = true;
        this.params = row;
        // this.value = [row.start_time, row.end_time];
        this.updId = data_id;
        // this.$nextTick(() => {
        //   this.essays = this.params.essay_list;
        //   this.videos = this.params.work_video_list;
        //   this.works = this.params.work_list;
        //   console.log(this.essays, this.works, this.videos);
        // });
      },
      addSub(row, type) {
        this.type = type;
        this[`show${type}Dialog`] = true;
        this[`${type.toLowerCase()}Form`].stadiums_id = row.data_id;
        this.updSubId = undefined;
      },
      closeSubWind() {
        let t = this.type.toLowerCase();
        this[`show${this.type}Dialog`] = false;
        this[`${t}Form`] = {
          stadiums_id: '',
          name: '',
          art_id: '',
          type: 0,
          recommend: 0,
          opus_id: [],
        };
        if (this.$refs[`${t}Page`]) {
          this.$refs[`${t}Page`].refresh();
        }
        this.$refs[`${t}Form`]?.resetFields();
        this.type = '';
      },
      async subSubmit() {
        let t = this.type.toLowerCase();
        this.$refs[`${t}Form`].validate(async (valid) => {
          if (valid) {
            if (this.updSubId) {
              await artGalleryManage[`upd${this.type}`](this.updSubId, this[`${t}Form`]);
            } else {
              const res = await artGalleryManage[`create${this.type}`](this[`${t}Form`]);
            }
            await this.closeSubWind();
          }
        });
      },
      addWork(row) {
        console.log(row.data_id);
        this.showWorkDialog = true;
        this.workForm.stadiums_id = row.data_id;
      },
      async onRecommend(row, type) {
        await artGalleryManage[`upd${type}`](row.data_id, row);
        this.$refs[`${type.toLowerCase()}Page`].refresh();
      },
      edit(row, type) {
        this.type = type;
        this[`${type.toLowerCase()}Form`] = {
          ...row,
        };
        this.updSubId = row.data_id;
        this[`show${type}Dialog`] = true;
      },
      del(row, type) {
        artGalleryManage[`del${type}`]({ id: row.data_id }).then((res) => {
          this.$message.success('删除成功');
          console.log;
          this.$nextTick(() => {
            this.$refs[`${type.toLowerCase()}Page`].refresh();
          });
        });
      },
      async delStadiums(data_id) {
        this.$alert('是否确定删除该展厅', '删除', {
          confirmButtonText: '确定',
          callback: async (action) => {
            if (action === 'confirm') {
              await artGalleryManage.delArtImage(data_id);
              this.refresh();
            }
          },
        });
      },
      async dialogConfirm() {
        this.$refs.dataParams.validate(async (valid) => {
          if (valid) {
            let res = null;
            if (this.updId) {
              res = await artGalleryManage.updArtGallery(this.updId, {
                ...this.params,
              });
            } else {
              res = await artGalleryManage.createArtGallery({
                ...this.params,
              });
            }
            if (res) {
              this.isShowDialog = false;
              this.updId = '';
              this.refresh();
            }
          }
        });
      },
      onClose() {
        this.params = {
          name: '',
          introduction: '',
        };
        this.updId = '';
      },
      Dialog(type, r) {
        this.activeRow = r;
        let map = {
          ImagesDialog: '作品',
          OpensDialog: '开幕式',
          PicturesDialog: '展览',
        };

        this.dialogTitle = map[type + 'Dialog'];
        this[type + 'Dialog'] = !this[type + 'Dialog'];
        this.$nextTick(() => {
          this.$refs.imagesPage?.refresh();
          this.$refs.opensPage?.refresh();
          this.$refs.picturesPage?.refresh();
        });
      },
    },
  };
</script>

<style lang="less" scoped>
  .subTable {
    float: right;
    width: 95%;
  }
  .add {
    border: 1px solid #dcdfe6;
    display: inline-block;
    line-height: 10px;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px;
    &:hover {
      color: white;
      background-color: #409eff;
    }
  }
  .menu {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    z-index: 999;
    & > div {
      padding: 10px 40px;
      border-bottom: 1px solid #eee;
      &:last-child {
        border-bottom: none;
      }
      &:hover {
        cursor: pointer;
        background-color: #409eff;
        color: white;
      }
    }
  }
  .good-container {
    height: 100%;
    .good-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .good-search {
        display: flex;
      }
    }
  }
</style>
